import React, { useState, useEffect } from 'react';
import { Button, Menu } from 'antd';
import { 

  UpOutlined
} from '@ant-design/icons';
import { useNavigate, useLocation, Outlet } from 'react-router-dom';
import { useAuthStore } from '../stores/authStore';



interface MainLayoutProps {
  children?: React.ReactNode;
}

const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
  const navigate = useNavigate();
  const location = useLocation();
  const { isAuthenticated, logout } = useAuthStore();

  // 导航菜单项 - 修改为直接点击的菜单项
  const menuItems = [
    {
      label: '作业概述',
      key: '/workData',
    },
    {
      label: '作业统计',
      key: '/workCount',
    },
    {
      label: '作业明细',
      key: '/workDetail',
    },
    {
      label: '车辆列表',
      key: '/vehicleList',
    },
    {
      label: '司机列表',
      key: '/driverList',
    },
    {
      label: '车辆分布',
      key: '/vehicleLocation',
    },
    {
      label: '车队',
      key: '/vehicleTeam',
    }
  ];

  // 菜单点击事件处理
  const handleMenuClick = ({ key }: { key: string }) => {
    navigate(key);
  };

  // 设置当前选中的菜单项
  const [currentMenu, setCurrentMenu] = useState('/workData');

  useEffect(() => {
    // 根据当前路径设置选中的菜单项
    const path = location.pathname;
    setCurrentMenu(path === '/' ? '/workData' : path);
  }, [location]);

  // 回到顶部按钮显示状态
  const [showBackTop, setShowBackTop] = useState(false);

  // 监听滚动事件
  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY > 300) {
        setShowBackTop(true);
      } else {
        setShowBackTop(false);
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // 回到顶部功能
  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  };

  // Check if we're on the login page
  const isLoginPage = location.pathname === '/user/login';

  return (
    <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
      {/* Header Navigation */}
      {!isLoginPage && (
        <header style={{ 
          position: 'fixed', 
          top: 0, 
          left: 0, 
          right: 0, 
          zIndex: 1000,
          // backgroundColor: '#fff',
          backgroundColor: '#212529',
          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.06)',
          padding: '0 40px'
        }}>
          <div style={{ 
            maxWidth: '1200px', 
            margin: '0 auto', 
            display: 'flex', 
            alignItems: 'center', 
            justifyContent: 'space-between',
            height: '64px'
          }}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <div style={{ 
                fontSize: '20px', 
                fontWeight: 600, 
                color: '#fff',
                display: 'flex',
                alignItems: 'center'
              }}>
                农福车辆作业系统
              </div>
              <nav style={{ marginLeft: '40px' }}>
                <Menu 
                  mode="horizontal" 
                  items={menuItems} 
                  theme='dark'
                  style={{ border: 'none', backgroundColor: 'transparent' }}
                  onClick={handleMenuClick}
                  selectedKeys={[currentMenu]}
                />
              </nav>
            </div>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              {isAuthenticated ? (
                <Button type="primary" style={{ borderRadius: '4px' }} onClick={() => {
                  logout();
                  navigate('/user/login');
                }}>退出</Button>
              ) : (
                <Button type="primary" style={{ borderRadius: '4px' }} onClick={() => navigate('/user/login')}>登录</Button>
              )}
            </div>
          </div>
        </header>
      )}

      {/* Main Content Area */}
      <main style={{ 
        flex: 1, 
        marginTop: isLoginPage ? '0' : '64px', 
        padding: isLoginPage ? '0' : '24px', 
        // maxWidth: '1200px', 
        margin: isLoginPage ? '0' : '64px auto 0',
        width: '100%'
      }}>
        {children || <Outlet />}
      </main>

      {/* Footer */}
      {!isLoginPage && (
        <footer 
          style={{ 
            backgroundColor: '#000', 
            color: 'rgba(255, 255, 255, 0.65)', 
            padding: '40px 0',
            flexShrink: 0,
            width: '100%'
          }}
        >
          <div style={{ padding: '0 40px' }}>
            <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
              <div style={{ textAlign: 'center' }}>
                <div style={{ margin: '0 0 24px 0', color: 'rgba(255, 255, 255, 0.65)' }}>
                  © {new Date().getFullYear()} 农福车辆作业系统. All rights reserved.
                </div>
              </div>
            </div>
          </div>
        </footer>
      )}

      {/* 回到顶部按钮 */}
      {showBackTop && !isLoginPage && (
        <Button
          type="primary"
          shape="circle"
          icon={<UpOutlined />}
          size="large"
          onClick={scrollToTop}
          style={{
            position: 'fixed',
            bottom: '50px',
            right: '50px',
            zIndex: 1000,
            width: '48px',
            height: '48px',
            fontSize: '20px',
            cursor: 'pointer',
            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)'
          }}
        />
      )}
    </div>
  );
};

export default MainLayout;